<!--
	固定在页面底部
	<c-fixed-bottom background-color='white' height='90rpx'> <button>添加</button> </c-fixed-bottom>
-->
<template>
	<view class="fixed-bottom" :style="[style, {'paddingTop': distance}]">
		<view class="fixed-bottom-content" :style="[style, {'background-color': props.backgroundColor}]">
			<view :style="[{'paddingBottom': distance}]">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue';

	// props
	const props = defineProps({
		// 高度
		height: {
			type: [String, Number],
			default: 'auto'
		},
		// 背景色
		backgroundColor: {
			type: String,
			default: 'transparent'
		},
		
		// 额外添加底部距离（底部安全距离上面添加）
		extraBottomDistance: {
			type: [String, Number],
			default: '0px',
		},
		// 有底部安全区域不额外再添加底部距离
		hasSafeBottomNotAddDistance: {
			type: Boolean,
			default: true,
		},
	});

	// 计算样式
	const { style, distance } = function () {
		const safeAreaBottom : number = getApp().globalData.safeAreaBottom; // 底部安全区域高度
		const style = computed(() => {
			return {
				'padding-bottom': safeAreaBottom + 'px',
				'min-height': /^\d+$/.test(props.height + '') ? props.height + 'px' : props.height,
			}
		});
		const distance = computed(() => {
			if (props.hasSafeBottomNotAddDistance && safeAreaBottom) return '0px';
			return /^\d+$/.test(props.extraBottomDistance + '') ? props.extraBottomDistance + 'px' : props.extraBottomDistance;
		});

		return { style, distance };
	}();
</script>

<style lang="scss" scoped>
	.fixed-bottom-content {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9;
		width: 100%;
	}
</style>